Botanic

    Primary color         #02ss50
    Primary bright color  #3399FF
    Gray bg               #f6f6f6
    Dark Gray bg          #eeeeee
*/

html {
  font-family: "Open Sans", Arial, Helvetica, sans-serif;
  font-size: 21px;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  scroll-behavior: smooth;
}

body {
  overflow-x: hidden;
}

a,
button {
  transition: all 0.3s ease;
	color: black;
}

a:hover {
  text-decoration: none;
	color: chartreuse;
}


.tm-bg-white-alpha {
  background-color: rgba(255, 255, 255, 0.5);
}

.tm-bg-black-alpha {
  background-color: rgba(0, 0, 0, 0.5);
}

.tm-bg-gray {
  background-color: #f6f6f6;
}

.tm-bg-dark-gray {
  background-color: #eeeeee;
}

h2 {
  font-size: 1.4rem;
}

p {
  line-height: 1.7;
	font-size: 1.6rem;
}

.tm-text-white {
  color: white;
}

.columns-bg {
  background-image: linear-gradient(
    to right,
    #cd7f32,
    #d78c3d 50%,
    #ffffff 50%
  );
}

.container-fluid {
  max-width: 1310px;
}

.tm-section-logo {
  padding-top: 170px;
  padding-bottom: 0;
}

.tm-section-logo-short {
  padding-top: 100px;
}

.tm-p-1-section-1 {
  margin-bottom: 80px;
}

#our_place {
  padding-top: 70px;
  padding-bottom: 70px;
}

.tm-section-4 {
  padding-top: 70px;
  padding-bottom: 70px;
}

#gallery {
  padding-top: 115px;
  padding-bottom: 110px;
}

.tm-section-contact {
  padding-top: 110px;
  padding-bottom: 90px;
}

#outro {
  padding-top: 90px;
}

#footer {
  padding-top: 30px;
  padding-bottom: 55px;
}

.tm-bg-primary {
  background-color: #F37800;
}

.tm-text-primary {
  color: #F37800;
font-size:14px;
}

.tm-text-primary-bright {
  color: #ff6e00;
}

.tm-hr-primary-bright {
  border-color: #ff6e00;
}

.tm-hr-white {
  border-color: white;
}

.tm-text-secondary {
  color: #fff;
}

.tm-text-gray {
  color: #656565;
}

.tm-text-accent {
  color: #F8A407;
}

.tm-section-title-2 {
  font-size: 1.8rem;
  text-align: right;
}

.tm-section-title-underline {
  border-top: 1px solid black;
  max-width: 500px;
  margin-right: 0;
  width: 85%;
}

.tm-site-name-container {
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
  border-bottom: 1px solid #ff6e00;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tm-site-name-container-inner {
  display: inline-block;
  margin-left: auto;
  margin-right: auto;
}

.tm-site-name {
  font-size: 3.5rem;
  font-weight: 600;
}

.tm-site-description {
  font-size: 1rem;
  margin-bottom: 50px;
}

.tm-section-text-container {
  padding: 0 50px;
}

.tm-section-text-container-2 {
  padding: 20px 55px 30px;
  max-width: 640px;
}

.tm-section-text-container-3 {
  padding: 64px 68px;
}

.tm-section-col-4 {
  margin-right: 0;
  margin-left: auto;
}

.tm-section-text-container-4 {
  padding: 40px 55px 0;
}

.tm-footer-text-container {
  padding: 0 70px;
}

.tm-section-text-container-5 {
  max-width: 430px;
  padding-right: 85px;
  margin-right: 0;
  margin-left: auto;
}

.tm-section-text-container-6 {
  padding: 0 55px 60px;
}

.tm-section-text-container-8 {
  padding: 64px 68px;
}

.tm-section-title-mb {
  margin-bottom: 30px;
}

.tm-section-title-mb-2 {
  margin-bottom: 50px;
}

.tm-img-right {
  margin-left: -1px; /* to fix 1 px gap in Chrome */
}

.tm-img-left-container,
.tm-text-left-container {
  padding-right: 0;
}

.tm-img-right-container {
  padding-left: 0;
}

/* Common style */
.grid {
  overflow: auto;
  display: flex;
  align-items: baseline;
  margin-left: auto;
  margin-right: auto;
}

.grid figure {
  position: relative;
  overflow: hidden;
  background: #cd7f32;
  text-align: center;
  cursor: pointer;
  margin-left: 10px;
  margin-right: 10px;
}

.grid figure img {
  position: relative;
  display: block;
  min-height: 100%;
  max-width: 100%;
  opacity: 0.8;
}

.grid figure figcaption {
  padding: 2em;
  color: #fff;
  text-transform: uppercase;
  /* font-size: 1.25em; */
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.grid figure figcaption::before,
.grid figure figcaption::after {
  pointer-events: none;
}

.grid figure figcaption,
.grid figure figcaption > a {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Anchor will cover the whole item by default */
/* For some effects it will show as a button */
.grid figure figcaption > a {
  z-index: 1000;
  text-indent: 200%;
  white-space: nowrap;
  font-size: 0;
  opacity: 0;
}

.grid figure h2 {
  word-spacing: -0.15em;
  font-weight: 300;
}

.grid figure h2 span {
  font-weight: 800;
}

.grid figure h2,
.grid figure p {
  margin: 0;
}

.grid figure p {
  letter-spacing: 1px;
  font-size: 68.5%;
}

/*---------------*/
/***** Duke *****/
/*---------------*/

figure.effect-duke {
  background: -webkit-linear-gradient(-45deg, #34495e 0%, #cc6055 100%);
  background: linear-gradient(-45deg, #34495e 0%, #cc6055 100%);
}

figure.effect-duke img,
figure.effect-duke p {
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
}

figure.effect-duke:hover img {
  opacity: 0.1;
  -webkit-transform: scale3d(2, 2, 1);
  transform: scale3d(2, 2, 1);
}

figure.effect-duke h2 {
  -webkit-transition: -webkit-transform 0.35s;
  transition: transform 0.35s;
  -webkit-transform: scale3d(0.8, 0.8, 1);
  transform: scale3d(0.8, 0.8, 1);
  -webkit-transform-origin: 50% 100%;
  transform-origin: 50% 100%;
}

figure.effect-duke p {
  position: absolute;
  bottom: 0;
  left: 0;
  margin: 20px;
  padding: 30px;
  border: 2px solid #fff;
  text-transform: none;
  font-size: 90%;
  opacity: 0;
  -webkit-transform: scale3d(0.8, 0.8, 1);
  transform: scale3d(0.8, 0.8, 1);
  -webkit-transform-origin: 50% -100%;
  transform-origin: 50% -100%;
}

figure.effect-duke:hover h2,
figure.effect-duke:hover p {
  opacity: 1;
  -webkit-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1);
}

.tm-contact-section {
  font-size: 0.95rem;
}

.tm-contact-left {
  max-width: 450px;
  margin-left: auto;
  margin-right: 0;
  padding: 70px 45px 70px 70px;
}

.tm-contact-left,
.tm-contact-form-container {
  max-width: 450px;
}

.tm-contact-link {
  color: #313638;
  display: flex;
  align-items: center;
  font-size: 0.8rem;
}

.tm-contact-icon-container {
  display: inline-block;
  background-color: white;
  color: #ff6e00;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  margin-right: 30px;
}

.tm-contact-icon-container-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.tm-social-icon-container {
  cursor: pointer;
  width: 62px;
  height: 62px;
  background-color: #E57F30;
  border-radius: 50%;
  display: inline-block;
  text-align: center;
  margin-right: 20px;
  margin-bottom: 20px;
  align-items: center;
  justify-content: center;
}

.tm-social-icon-container-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.tm-contact-icon {
  font-size: 1.5rem;
}

.tm-phone-icon {
  margin-top: -2px;
  margin-left: -2px;
}

.tm-contact-form {
  max-width: 380px;
}

.form-group {
  margin-bottom: 1.5rem;
}

.form-control {
  border-color: #9a9a9a;
  font-size: 0.9rem;
}

.form-control:focus {
  box-shadow: none;
}

.tm-contact-form-container {
  padding: 55px 67px;
}

.tm-btn-submit {
  border: 1px solid #9a9a9a;
  padding: 10px 35px;
  color: #313638;
  font-size: 0.9rem;
}

.tm-btn-submit:hover {
  color: #ff6e00;
  border-color: #ff6e00;
}

.tm-social-icon-container:hover {
  background-color: #ff6e00;
}

.tm-social-icon-container i {
  color: white;
}

.tm-copyright-text {
  font-size: 0.85rem;
}

.tm-copyright-link {
  color: #ff6e00;
}

.tm-p-2-section-1 {
  margin-top: 70px;
  padding-top: 60px;
  padding-bottom: 60px;
}

.tm-p-3-section-1 {
  padding-top: 82px;
}

.tm-p-3-section-3 {
  margin-top: 60px;
  margin-bottom: 40px;
}

.tm-p-3-section-contact {
  padding-top: 60px;
}

.tm-section-underline {
  width: 50%;
}

.btn {
  padding: 11px 40px;
  border-radius: 0;
}

.btn-primary {
  background-color: #ff6e00;
  border-color: #ff6e00;
}

.btn-secondary {
  background-color: white;
  border-color: white;
  color: #ff6e00;
}

.btn-secondary:hover {
  color: #ff6e00;
  background-color: #c5c7ca;
  border-color: #c5c7ca;
}

hr {
  border-color: black;
}

.tm-hr-mb {
  margin-bottom: 46px;
}

.tm-p-mb {
  margin-bottom: 45px;
}

.tm-text-right-container {
  padding-left: 0;
}

.tm-section-text-container-7 {
  padding: 65px 140px;
}

#bg_img_31 {
  background-image: url("../../Site1/images/Photos Bastia carrousel/Théophraste/Theophraste 1.jpg");
  height: 640px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

#bg_img_32 {
  background-image: url("../../images/DSCN0767.JPG");
  height: 640px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.tm-section-icon-container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.fa-6x {
  font-size: 6em;
}

.tm-overlay-container {
  position: relative;
}

.tm-text-overlay {
  max-width: 498px;
  width: 50%;
  height: 100%;
  margin-left: 50%;
}

.tm-copyright-text {
  padding: 60px 40px 55px 70px;
}

@media (min-width: 1200px) {
  .container {
    max-width: 1280px;
  }
}

@media (max-width: 1200px) {
  .tm-section-title-underline {
    max-width: 350px;
  }

  .grid figure h2 {
    font-size: 1.1em;
  }

  figure.effect-duke p {
    padding: 20px;
  }

  .tm-social-icon-container {
    width: 50px;
    height: 50px;
  }
}

@media (max-width: 1100px) {
  .tm-section-underline {
    width: 60%;
  }
}

@media (max-width: 991px) {
  .grid {
    flex-wrap: wrap;
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
  }

  .tm-social-icon-container {
    margin-right: 10px;
  }

  .tm-section-text-container-2 {
    margin: 0 auto;
    background-color: rgba(255, 255, 255, 0.9);
  }

  .tm-section-text-container-3 {
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
  }

  .tm-section-text-container-4 {
    padding-left: 15px;
    padding-right: 15px;
    max-width: 320px;
  }

  .tm-section-image-container {
    text-align: center;
  }

  .tm-img-left-container,
  .tm-text-left-container {
    padding-right: 15px;
  }

  .tm-img-right-container {
    padding-left: 15px;
  }

  .tm-section-title-2 {
    text-align: center;
  }

  .tm-section-title-underline {
    margin-left: auto;
    margin-right: auto;
  }

  .tm-section-text-container-7 {
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
    padding: 64px 68px;
  }

  .tm-text-overlay {
    padding: 7%;
    width: 100%;
    margin-left: auto;
    position: relative;
    right: 0;
  }

  .tm-section-underline {
    width: 80%;
  }
}

@media (max-width: 900px) {
  #outro {
    padding-top: 45px;
  }
}

@media (max-width: 767px) {
  .columns-bg {
	  color: #F95D01;
    background-image: none;
  }

  .tm-site-name-container {
    background-color: rgba(255, 255, 255, 0.5);
  }

  .tm-section-logo {
    padding-top: 3rem;
  }

  .tm-p-1-section-1 {
    margin-top: 50px;
    margin-bottom: 50px;
  }

  .tm-p-2-section-1 {
    margin-top: 50px;
  }

  .tm-p-3-section-3 {
    margin-top: 0;
  }

  #intro,
  #section_4,
  #contact {
    background-color: #99ccff;
  }

  #our_place {
    background-color: white;
    padding-top: 35px;
    padding-bottom: 35px;
  }

  #gallery {
    padding-top: 60px;
    padding-bottom: 60px;
  }

  .tm-section-contact {
    padding-top: 80px;
    padding-bottom: 80px;
  }

  #outro {
    padding-top: 60px;
  }

  #footer {
    padding-top: 0;
    padding-bottom: 15px;
  }

  .tm-contact-left {
    margin-left: 0;
  }

  .tm-section-text-container {
    padding: 50px;
  }

  .tm-section-text-container-4 {
    padding: 30px 70px 0;
    max-width: none;
  }

  .tm-section-text-container-5 {
    margin-left: 0;
  }

  .tm-section-text-container-6 {
    margin-top: 50px;
    padding: 0;
  }

  #outro .tm-text-white {
    color: #cd7f32;
  }

  .tm-contact-left,
  .tm-contact-form-container {
    margin-left: auto;
    margin-right: auto;
  }

  .tm-contact-form-container {
    padding-bottom: 0;
  }

  .tm-btn-submit {
    color: white;
    border-color: white;
  }

  .tm-btn-submit:hover {
    color: #e9ecef;
    border-color: #e9ecef;
  }

  .form-control {
    background-color: transparent;
    color: white;
    border-color: white;
  }

  .form-control::placeholder {
    /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: white;
    opacity: 1; /* Firefox */
  }

  .form-control:-ms-input-placeholder {
    /* Internet Explorer 10-11 */
    color: white;
  }

  .form-control::-ms-input-placeholder {
    /* Microsoft Edge */
    color: white;
  }

  .tm-copyright-text {
    background-color: rgba(255, 255, 255, 0.8);
    padding: 10px 10px 10px 0;
  }

  .tm-sm-bg-blue {
    background-color: #cd7f32;
  }

  .tm-section-icon-container {
    padding-top: 150px;
    padding-bottom: 150px;
  }

  .tm-section-underline {
    width: 100%;
  }

  #bg_img_31 {
    height: 500px;
  }

  .tm-p-3-section-contact {
    padding-bottom: 60px;
  }
}

@media (max-width: 687px) {
  .grid figure {
    flex: 1 0 40%;
  }
	.columns-bg {
	  color: #F95D01;
    background-image: none;
  }
}

@media (max-width: 575px) {
  .tm-section-text-container-5 {
    padding-right: 15px;
    margin-left: 0;
    margin-right: auto;
  }

  .tm-section-text-container-6 {
    padding: 0 15px 0 0;
    margin-left: 0;
    margin-right: auto;
    max-width: 450px;
  }

  .tm-section-text-container-3,
  .tm-section-text-container-8 {
    padding: 40px 30px;
  }

  .tm-section-icon-container {
    padding-top: 90px;
    padding-bottom: 90px;
  }
	.columns-bg {
	  color: #F95D01;
    background-image: none;
  }
}

@media (max-width: 529px) {
  .grid {
    max-width: 300px;
    overflow-x: hidden;
  }
  .grid figure {
    flex: 1 0 100%;
  }
	.columns-bg {
	  color: #F95D01;
    background-image: none;
  }

  .tm-section-text-container-4 {
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
    padding: 30px;
  }
}

@media (max-width: 480px) {
  h1 {
    font-size: 2rem;
  }

  .tm-site-name-container {
    padding-left: 15%;
    padding-right: 10%;
  }

  .tm-sm-bg-white-alpha {
    background-color: rgba(255, 255, 255, 0.8);
    padding: 5px;
  }

  .grid {
    flex-wrap: wrap;
  }

  .tm-gallery-title-col {
    padding-right: 15px;
  }

  .tm-section-text-container-4 {
    padding: 30px;
  }

  .tm-footer-text-container {
    padding-left: 25px;
  }

  .tm-contact-left {
    padding: 60px 30px;
  }

  .tm-contact-form-container {
    padding: 40px 30px 0;
  }

  #outro {
    padding-top: 40px;
    padding-left: 10px;
  }

  #bg_img_32 {
    height: 600px;
  }
}
#menu__toggle {
  opacity: 0;
}

#menu__toggle:checked ~ .menu__btn > span {
  transform: rotate(45deg);
}
#menu__toggle:checked ~ .menu__btn > span::before {
  top: 0;
  transform: rotate(0);
}
#menu__toggle:checked ~ .menu__btn > span::after {
  top: 0;
  transform: rotate(90deg);
}
#menu__toggle:checked ~ .menu__box {
  visibility: visible;
  left: 0;
}

.menu__btn {
  display: flex;
  align-items: center;
  position: fixed;
  top: 20px;
  right: 40px;

  width: 20px;
  height: 20px;

  cursor: pointer;
  z-index: 1;}

.menu__btn > span,
.menu__btn > span::before,
.menu__btn > span::after {
  display: block;
  position: absolute;

  width: 100%;
  height: 2px;

  background-color: #0A0A0A;

  transition-duration: .25s;
}
.menu__btn > span::before {
  content: '';
  top: -8px;
}
.menu__btn > span::after {
  content: '';
  top: 8px;
}

.menu__box {
  display: block;
  position: fixed;
  visibility: hidden;
  top: 0;
  left: -100%;

  width: 300px;
  height: 100%;

  margin: 0;
  padding: 80px 0;

  list-style: none;

  background-color: #ECEFF1;
  box-shadow: 1px 0px 5px rgba(0, 0, 0, .2);

  transition-duration: .25s;
}

.menu__item {
  display:
  padding: 5px 10px;

  color: #;

  font-family: 'Roboto', sans-serif;
	color: black;
  font-size: 14px;
  font-weight: 600;

  text-decoration: none;

  transition-duration: .25s;
}
.menu__item:hover {
  background-color: #CFD8DC;
}
@import "compass/css3";

svg
  {
    width:100px;
    height:100px;
	  

    .the-background
    {
      @include transition(fill, 1s);
      fill: green;
    }
	  
	   .the-background1
    {
      @include transition(fill, 1s);
      fill: grey;
    }

    .the-icon
    {
      @include transition(fill, 2.5s);
    }
  }
svg1
  {
    width:100px;
    height:100px;
   
	  

    .the-background
    {
      @include transition(fill, 1s);
      fill: green;
    }
	  
	   .the-background1
    {
      @include transition(fill, 1s);
      fill: grey;
    }

    .the-icon
    {
      @include transition(fill, 2.5s);
    }
  }
a
{
  width:100px;
  height:100px;
  overflow: hidden;
  
  @include transition(color, 1s);
  @include transition(background, 1s);

  

  &:hover
  {
    color: red;
    background: black;
    .the-background
    {
      fill: black;
    }

    .the-icon
    {
      fill: red;
    } 
   
  }
}


.svg-outside-anchor
{
  
}

/* timeline */
/* The actual timeline (the vertical ruler) */
.main-timeline-2 {
  position: relative;
}

/* The actual timeline (the vertical ruler) */
.main-timeline-2::after {
  content: "";
  position: absolute;
  width: 3px;
  background-color: #EC8809;
  top: 0;
  bottom: 0;
  left: 50%;
  margin-left: -3px;
}

/* Container around content */
.timeline-2 {
  position: relative;
  background-color: inherit;
  width: 50%;
}

/* The circles on the timeline */
.timeline-2::after {
  content: "";
  position: absolute;
  width: 25px;
  height: 25px;
  right: -11px;
  background-color: #EC8809;
  top: 15px;
  border-radius: 50%;
  z-index: 1;
}

/* Place the container to the left */
.left-2 {
  padding: 0px 40px 20px 0px;
  left: 0;
}

/* Place the container to the right */
.right-2 {
  padding: 0px 0px 20px 40px;
  left: 50%;
}

/* Add arrows to the left container (pointing right) */
.left-2::before {
  content: " ";
  position: absolute;
  top: 18px;
  z-index: 1;
  right: 30px;
  border: medium solid white;
  border-width: 10px 0 10px 10px;
  border-color: transparent transparent transparent white;
}

/* Add arrows to the right container (pointing left) */
.right-2::before {
  content: " ";
  position: absolute;
  top: 18px;
  z-index: 1;
  left: 30px;
  border: medium solid white;
  border-width: 10px 10px 10px 0;
  border-color: transparent white transparent transparent;
}

/* Fix the circle for containers on the right side */
.right-2::after {
  left: -14px;
}

/* Media queries - Responsive timeline on screens less than 600px wide */
@media screen and (max-width: 600px) {
  /* Place the timelime to the left */
  .main-timeline-2::after {
    left: 31px;
  }

  /* Full-width containers */
  .timeline-2 {
    width: 100%;
    padding-left: 70px;
    padding-right: 25px;
  }

  /* Make sure that all arrows are pointing leftwards */
  .timeline-2::before {
    left: 60px;
    border: medium solid white;
    border-width: 10px 10px 10px 0;
    border-color: transparent white transparent transparent;
  }

  /* Make sure all circles are at the same spot */
  .left-2::after,
  .right-2::after {
    left: 18px;
  }

  .left-2::before {
    right: auto;
  }

  /* Make all right containers behave like the left ones */
  .right-2 {
    left: 0%;
  }
}

/* galerie */
*,
*::before,
*::after {
  box-sizing: border-box;
}

img {
  display: block;
}

.gallery {
  position: relative;
  z-index: 2;
  padding: 10px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-flow: row wrap;
      flex-flow: row wrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;
}
.gallery.pop {
  -webkit-filter: blur(10px);
          filter: blur(10px);
}
.gallery figure {
  -ms-flex-preferred-size: 33.333%;
      flex-basis: 33.333%;
  padding: 10px;
  overflow: hidden;
  border-radius: 10px;
  cursor: pointer;
}
.gallery figure img {
  width: 100%;
  border-radius: 10px;
  -webkit-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
}
.gallery figure figcaption {
  display: none;
}

.popup {
  position: fixed;
  z-index: 2;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.75);
  opacity: 0;
  -webkit-transition: opacity .5s ease-in-out .2s;
  transition: opacity .5s ease-in-out .2s;
}
.popup.pop {
  opacity: 1;
  -webkit-transition: opacity .2s ease-in-out 0s;
  transition: opacity .2s ease-in-out 0s;
}
.popup.pop figure {
  margin-top: 0;
  opacity: 1;
}
.popup figure {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  -webkit-transform-origin: 0 0;
          transform-origin: 0 0;
  margin-top: 30px;
  opacity: 0;
  -webkit-animation: poppy 500ms linear both;
          animation: poppy 500ms linear both;
}
.popup figure img {
  position: relative;
  z-index: 2;
  border-radius: 15px;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2), 0 6px 30px rgba(0, 0, 0, 0.4);
}
.popup figure figcaption {
  position: absolute;
  bottom: 50px;
  background: -webkit-linear-gradient(top, transparent, rgba(0, 0, 0, 0.78));
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.78));
  z-index: 2;
  width: 100%;
  border-radius: 0 0 15px 15px;
  padding: 100px 20px 20px 20px;
  color: #fff;
  font-family: 'Open Sans', sans-serif;
  font-size: 32px;
}
.popup figure figcaption small {
  font-size: 11px;
  display: block;
  text-transform: uppercase;
  margin-top: 12px;
  text-indent: 3px;
  opacity: .7;
  letter-spacing: 1px;
}
.popup figure .shadow {
  position: relative;
  z-index: 1;
  top: -15px;
  margin: 0 auto;
  background-position: center bottom;
  background-repeat: no-repeat;
  width: 98%;
  height: 50px;
  opacity: .6;
  -webkit-filter: blur(15px) contrast(2);
          filter: blur(15px) contrast(2);
}
.popup .close {
  position: absolute;
  z-index: 3;
  top: 10px;
  right: 10px;
  width: 25px;
  height: 25px;
  cursor: pointer;
  background: url(#close);
  border-radius: 25px;
  background: rgba(0, 0, 0, 0.1);
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
}
.popup .close svg {
  width: 100%;
  height: 100%;
}

@-webkit-keyframes poppy {
  0% {
    -webkit-transform: matrix3d(0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
            transform: matrix3d(0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  3.4% {
    -webkit-transform: matrix3d(0.316, 0, 0, 0, 0, 0.407, 0, 0, 0, 0, 1, 0, -94.672, -91.573, 0, 1);
            transform: matrix3d(0.316, 0, 0, 0, 0, 0.407, 0, 0, 0, 0, 1, 0, -94.672, -91.573, 0, 1);
  }
  4.3% {
    -webkit-transform: matrix3d(0.408, 0, 0, 0, 0, 0.54, 0, 0, 0, 0, 1, 0, -122.527, -121.509, 0, 1);
            transform: matrix3d(0.408, 0, 0, 0, 0, 0.54, 0, 0, 0, 0, 1, 0, -122.527, -121.509, 0, 1);
  }
  4.7% {
    -webkit-transform: matrix3d(0.45, 0, 0, 0, 0, 0.599, 0, 0, 0, 0, 1, 0, -134.908, -134.843, 0, 1);
            transform: matrix3d(0.45, 0, 0, 0, 0, 0.599, 0, 0, 0, 0, 1, 0, -134.908, -134.843, 0, 1);
  }
  6.81% {
    -webkit-transform: matrix3d(0.659, 0, 0, 0, 0, 0.893, 0, 0, 0, 0, 1, 0, -197.77, -200.879, 0, 1);
            transform: matrix3d(0.659, 0, 0, 0, 0, 0.893, 0, 0, 0, 0, 1, 0, -197.77, -200.879, 0, 1);
  }
  8.61% {
    -webkit-transform: matrix3d(0.82, 0, 0, 0, 0, 1.097, 0, 0, 0, 0, 1, 0, -245.972, -246.757, 0, 1);
            transform: matrix3d(0.82, 0, 0, 0, 0, 1.097, 0, 0, 0, 0, 1, 0, -245.972, -246.757, 0, 1);
  }
  9.41% {
    -webkit-transform: matrix3d(0.883, 0, 0, 0, 0, 1.168, 0, 0, 0, 0, 1, 0, -265.038, -262.804, 0, 1);
            transform: matrix3d(0.883, 0, 0, 0, 0, 1.168, 0, 0, 0, 0, 1, 0, -265.038, -262.804, 0, 1);
  }
  10.21% {
    -webkit-transform: matrix3d(0.942, 0, 0, 0, 0, 1.226, 0, 0, 0, 0, 1, 0, -282.462, -275.93, 0, 1);
            transform: matrix3d(0.942, 0, 0, 0, 0, 1.226, 0, 0, 0, 0, 1, 0, -282.462, -275.93, 0, 1);
  }
  12.91% {
    -webkit-transform: matrix3d(1.094, 0, 0, 0, 0, 1.328, 0, 0, 0, 0, 1, 0, -328.332, -298.813, 0, 1);
            transform: matrix3d(1.094, 0, 0, 0, 0, 1.328, 0, 0, 0, 0, 1, 0, -328.332, -298.813, 0, 1);
  }
  13.61% {
    -webkit-transform: matrix3d(1.123, 0, 0, 0, 0, 1.332, 0, 0, 0, 0, 1, 0, -336.934, -299.783, 0, 1);
            transform: matrix3d(1.123, 0, 0, 0, 0, 1.332, 0, 0, 0, 0, 1, 0, -336.934, -299.783, 0, 1);
  }
  14.11% {
    -webkit-transform: matrix3d(1.141, 0, 0, 0, 0, 1.331, 0, 0, 0, 0, 1, 0, -342.273, -299.395, 0, 1);
            transform: matrix3d(1.141, 0, 0, 0, 0, 1.331, 0, 0, 0, 0, 1, 0, -342.273, -299.395, 0, 1);
  }
  17.22% {
    -webkit-transform: matrix3d(1.205, 0, 0, 0, 0, 1.252, 0, 0, 0, 0, 1, 0, -361.606, -281.592, 0, 1);
            transform: matrix3d(1.205, 0, 0, 0, 0, 1.252, 0, 0, 0, 0, 1, 0, -361.606, -281.592, 0, 1);
  }
  17.52% {
    -webkit-transform: matrix3d(1.208, 0, 0, 0, 0, 1.239, 0, 0, 0, 0, 1, 0, -362.348, -278.88, 0, 1);
            transform: matrix3d(1.208, 0, 0, 0, 0, 1.239, 0, 0, 0, 0, 1, 0, -362.348, -278.88, 0, 1);
  }
  18.72% {
    -webkit-transform: matrix3d(1.212, 0, 0, 0, 0, 1.187, 0, 0, 0, 0, 1, 0, -363.633, -267.15, 0, 1);
            transform: matrix3d(1.212, 0, 0, 0, 0, 1.187, 0, 0, 0, 0, 1, 0, -363.633, -267.15, 0, 1);
  }
  21.32% {
    -webkit-transform: matrix3d(1.196, 0, 0, 0, 0, 1.069, 0, 0, 0, 0, 1, 0, -358.864, -240.617, 0, 1);
            transform: matrix3d(1.196, 0, 0, 0, 0, 1.069, 0, 0, 0, 0, 1, 0, -358.864, -240.617, 0, 1);
  }
  24.32% {
    -webkit-transform: matrix3d(1.151, 0, 0, 0, 0, 0.96, 0, 0, 0, 0, 1, 0, -345.164, -216.073, 0, 1);
            transform: matrix3d(1.151, 0, 0, 0, 0, 0.96, 0, 0, 0, 0, 1, 0, -345.164, -216.073, 0, 1);
  }
  25.23% {
    -webkit-transform: matrix3d(1.134, 0, 0, 0, 0, 0.938, 0, 0, 0, 0, 1, 0, -340.193, -210.948, 0, 1);
            transform: matrix3d(1.134, 0, 0, 0, 0, 0.938, 0, 0, 0, 0, 1, 0, -340.193, -210.948, 0, 1);
  }
  28.33% {
    -webkit-transform: matrix3d(1.075, 0, 0, 0, 0, 0.898, 0, 0, 0, 0, 1, 0, -322.647, -202.048, 0, 1);
            transform: matrix3d(1.075, 0, 0, 0, 0, 0.898, 0, 0, 0, 0, 1, 0, -322.647, -202.048, 0, 1);
  }
  29.03% {
    -webkit-transform: matrix3d(1.063, 0, 0, 0, 0, 0.897, 0, 0, 0, 0, 1, 0, -318.884, -201.771, 0, 1);
            transform: matrix3d(1.063, 0, 0, 0, 0, 0.897, 0, 0, 0, 0, 1, 0, -318.884, -201.771, 0, 1);
  }
  29.93% {
    -webkit-transform: matrix3d(1.048, 0, 0, 0, 0, 0.899, 0, 0, 0, 0, 1, 0, -314.277, -202.202, 0, 1);
            transform: matrix3d(1.048, 0, 0, 0, 0, 0.899, 0, 0, 0, 0, 1, 0, -314.277, -202.202, 0, 1);
  }
  35.54% {
    -webkit-transform: matrix3d(0.979, 0, 0, 0, 0, 0.962, 0, 0, 0, 0, 1, 0, -293.828, -216.499, 0, 1);
            transform: matrix3d(0.979, 0, 0, 0, 0, 0.962, 0, 0, 0, 0, 1, 0, -293.828, -216.499, 0, 1);
  }
  36.74% {
    -webkit-transform: matrix3d(0.972, 0, 0, 0, 0, 0.979, 0, 0, 0, 0, 1, 0, -291.489, -220.242, 0, 1);
            transform: matrix3d(0.972, 0, 0, 0, 0, 0.979, 0, 0, 0, 0, 1, 0, -291.489, -220.242, 0, 1);
  }
  39.44% {
    -webkit-transform: matrix3d(0.962, 0, 0, 0, 0, 1.01, 0, 0, 0, 0, 1, 0, -288.62, -227.228, 0, 1);
            transform: matrix3d(0.962, 0, 0, 0, 0, 1.01, 0, 0, 0, 0, 1, 0, -288.62, -227.228, 0, 1);
  }
  41.04% {
    -webkit-transform: matrix3d(0.961, 0, 0, 0, 0, 1.022, 0, 0, 0, 0, 1, 0, -288.247, -229.999, 0, 1);
            transform: matrix3d(0.961, 0, 0, 0, 0, 1.022, 0, 0, 0, 0, 1, 0, -288.247, -229.999, 0, 1);
  }
  44.44% {
    -webkit-transform: matrix3d(0.966, 0, 0, 0, 0, 1.032, 0, 0, 0, 0, 1, 0, -289.763, -232.215, 0, 1);
            transform: matrix3d(0.966, 0, 0, 0, 0, 1.032, 0, 0, 0, 0, 1, 0, -289.763, -232.215, 0, 1);
  }
  52.15% {
    -webkit-transform: matrix3d(0.991, 0, 0, 0, 0, 1.006, 0, 0, 0, 0, 1, 0, -297.363, -226.449, 0, 1);
            transform: matrix3d(0.991, 0, 0, 0, 0, 1.006, 0, 0, 0, 0, 1, 0, -297.363, -226.449, 0, 1);
  }
  59.86% {
    -webkit-transform: matrix3d(1.006, 0, 0, 0, 0, 0.99, 0, 0, 0, 0, 1, 0, -301.813, -222.759, 0, 1);
            transform: matrix3d(1.006, 0, 0, 0, 0, 0.99, 0, 0, 0, 0, 1, 0, -301.813, -222.759, 0, 1);
  }
  61.66% {
    -webkit-transform: matrix3d(1.007, 0, 0, 0, 0, 0.991, 0, 0, 0, 0, 1, 0, -302.102, -222.926, 0, 1);
            transform: matrix3d(1.007, 0, 0, 0, 0, 0.991, 0, 0, 0, 0, 1, 0, -302.102, -222.926, 0, 1);
  }
  63.26% {
    -webkit-transform: matrix3d(1.007, 0, 0, 0, 0, 0.992, 0, 0, 0, 0, 1, 0, -302.171, -223.276, 0, 1);
            transform: matrix3d(1.007, 0, 0, 0, 0, 0.992, 0, 0, 0, 0, 1, 0, -302.171, -223.276, 0, 1);
  }
  75.28% {
    -webkit-transform: matrix3d(1.001, 0, 0, 0, 0, 1.003, 0, 0, 0, 0, 1, 0, -300.341, -225.696, 0, 1);
            transform: matrix3d(1.001, 0, 0, 0, 0, 1.003, 0, 0, 0, 0, 1, 0, -300.341, -225.696, 0, 1);
  }
  83.98% {
    -webkit-transform: matrix3d(0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -299.61, -225.049, 0, 1);
            transform: matrix3d(0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -299.61, -225.049, 0, 1);
  }
  85.49% {
    -webkit-transform: matrix3d(0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -299.599, -224.94, 0, 1);
            transform: matrix3d(0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -299.599, -224.94, 0, 1);
  }
  90.69% {
    -webkit-transform: matrix3d(0.999, 0, 0, 0, 0, 0.999, 0, 0, 0, 0, 1, 0, -299.705, -224.784, 0, 1);
            transform: matrix3d(0.999, 0, 0, 0, 0, 0.999, 0, 0, 0, 0, 1, 0, -299.705, -224.784, 0, 1);
  }
  100% {
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -300, -225, 0, 1);
            transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -300, -225, 0, 1);
  }
}

@keyframes poppy {
  0% {
    -webkit-transform: matrix3d(0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
            transform: matrix3d(0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  3.4% {
    -webkit-transform: matrix3d(0.316, 0, 0, 0, 0, 0.407, 0, 0, 0, 0, 1, 0, -94.672, -91.573, 0, 1);
            transform: matrix3d(0.316, 0, 0, 0, 0, 0.407, 0, 0, 0, 0, 1, 0, -94.672, -91.573, 0, 1);
  }
  4.3% {
    -webkit-transform: matrix3d(0.408, 0, 0, 0, 0, 0.54, 0, 0, 0, 0, 1, 0, -122.527, -121.509, 0, 1);
            transform: matrix3d(0.408, 0, 0, 0, 0, 0.54, 0, 0, 0, 0, 1, 0, -122.527, -121.509, 0, 1);
  }
  4.7% {
    -webkit-transform: matrix3d(0.45, 0, 0, 0, 0, 0.599, 0, 0, 0, 0, 1, 0, -134.908, -134.843, 0, 1);
            transform: matrix3d(0.45, 0, 0, 0, 0, 0.599, 0, 0, 0, 0, 1, 0, -134.908, -134.843, 0, 1);
  }
  6.81% {
    -webkit-transform: matrix3d(0.659, 0, 0, 0, 0, 0.893, 0, 0, 0, 0, 1, 0, -197.77, -200.879, 0, 1);
            transform: matrix3d(0.659, 0, 0, 0, 0, 0.893, 0, 0, 0, 0, 1, 0, -197.77, -200.879, 0, 1);
  }
  8.61% {
    -webkit-transform: matrix3d(0.82, 0, 0, 0, 0, 1.097, 0, 0, 0, 0, 1, 0, -245.972, -246.757, 0, 1);
            transform: matrix3d(0.82, 0, 0, 0, 0, 1.097, 0, 0, 0, 0, 1, 0, -245.972, -246.757, 0, 1);
  }
  9.41% {
    -webkit-transform: matrix3d(0.883, 0, 0, 0, 0, 1.168, 0, 0, 0, 0, 1, 0, -265.038, -262.804, 0, 1);
            transform: matrix3d(0.883, 0, 0, 0, 0, 1.168, 0, 0, 0, 0, 1, 0, -265.038, -262.804, 0, 1);
  }
  10.21% {
    -webkit-transform: matrix3d(0.942, 0, 0, 0, 0, 1.226, 0, 0, 0, 0, 1, 0, -282.462, -275.93, 0, 1);
            transform: matrix3d(0.942, 0, 0, 0, 0, 1.226, 0, 0, 0, 0, 1, 0, -282.462, -275.93, 0, 1);
  }
  12.91% {
    -webkit-transform: matrix3d(1.094, 0, 0, 0, 0, 1.328, 0, 0, 0, 0, 1, 0, -328.332, -298.813, 0, 1);
            transform: matrix3d(1.094, 0, 0, 0, 0, 1.328, 0, 0, 0, 0, 1, 0, -328.332, -298.813, 0, 1);
  }
  13.61% {
    -webkit-transform: matrix3d(1.123, 0, 0, 0, 0, 1.332, 0, 0, 0, 0, 1, 0, -336.934, -299.783, 0, 1);
            transform: matrix3d(1.123, 0, 0, 0, 0, 1.332, 0, 0, 0, 0, 1, 0, -336.934, -299.783, 0, 1);
  }
  14.11% {
    -webkit-transform: matrix3d(1.141, 0, 0, 0, 0, 1.331, 0, 0, 0, 0, 1, 0, -342.273, -299.395, 0, 1);
            transform: matrix3d(1.141, 0, 0, 0, 0, 1.331, 0, 0, 0, 0, 1, 0, -342.273, -299.395, 0, 1);
  }
  17.22% {
    -webkit-transform: matrix3d(1.205, 0, 0, 0, 0, 1.252, 0, 0, 0, 0, 1, 0, -361.606, -281.592, 0, 1);
            transform: matrix3d(1.205, 0, 0, 0, 0, 1.252, 0, 0, 0, 0, 1, 0, -361.606, -281.592, 0, 1);
  }
  17.52% {
    -webkit-transform: matrix3d(1.208, 0, 0, 0, 0, 1.239, 0, 0, 0, 0, 1, 0, -362.348, -278.88, 0, 1);
            transform: matrix3d(1.208, 0, 0, 0, 0, 1.239, 0, 0, 0, 0, 1, 0, -362.348, -278.88, 0, 1);
  }
  18.72% {
    -webkit-transform: matrix3d(1.212, 0, 0, 0, 0, 1.187, 0, 0, 0, 0, 1, 0, -363.633, -267.15, 0, 1);
            transform: matrix3d(1.212, 0, 0, 0, 0, 1.187, 0, 0, 0, 0, 1, 0, -363.633, -267.15, 0, 1);
  }
  21.32% {
    -webkit-transform: matrix3d(1.196, 0, 0, 0, 0, 1.069, 0, 0, 0, 0, 1, 0, -358.864, -240.617, 0, 1);
            transform: matrix3d(1.196, 0, 0, 0, 0, 1.069, 0, 0, 0, 0, 1, 0, -358.864, -240.617, 0, 1);
  }
  24.32% {
    -webkit-transform: matrix3d(1.151, 0, 0, 0, 0, 0.96, 0, 0, 0, 0, 1, 0, -345.164, -216.073, 0, 1);
            transform: matrix3d(1.151, 0, 0, 0, 0, 0.96, 0, 0, 0, 0, 1, 0, -345.164, -216.073, 0, 1);
  }
  25.23% {
    -webkit-transform: matrix3d(1.134, 0, 0, 0, 0, 0.938, 0, 0, 0, 0, 1, 0, -340.193, -210.948, 0, 1);
            transform: matrix3d(1.134, 0, 0, 0, 0, 0.938, 0, 0, 0, 0, 1, 0, -340.193, -210.948, 0, 1);
  }
  28.33% {
    -webkit-transform: matrix3d(1.075, 0, 0, 0, 0, 0.898, 0, 0, 0, 0, 1, 0, -322.647, -202.048, 0, 1);
            transform: matrix3d(1.075, 0, 0, 0, 0, 0.898, 0, 0, 0, 0, 1, 0, -322.647, -202.048, 0, 1);
  }
  29.03% {
    -webkit-transform: matrix3d(1.063, 0, 0, 0, 0, 0.897, 0, 0, 0, 0, 1, 0, -318.884, -201.771, 0, 1);
            transform: matrix3d(1.063, 0, 0, 0, 0, 0.897, 0, 0, 0, 0, 1, 0, -318.884, -201.771, 0, 1);
  }
  29.93% {
    -webkit-transform: matrix3d(1.048, 0, 0, 0, 0, 0.899, 0, 0, 0, 0, 1, 0, -314.277, -202.202, 0, 1);
            transform: matrix3d(1.048, 0, 0, 0, 0, 0.899, 0, 0, 0, 0, 1, 0, -314.277, -202.202, 0, 1);
  }
  35.54% {
    -webkit-transform: matrix3d(0.979, 0, 0, 0, 0, 0.962, 0, 0, 0, 0, 1, 0, -293.828, -216.499, 0, 1);
            transform: matrix3d(0.979, 0, 0, 0, 0, 0.962, 0, 0, 0, 0, 1, 0, -293.828, -216.499, 0, 1);
  }
  36.74% {
    -webkit-transform: matrix3d(0.972, 0, 0, 0, 0, 0.979, 0, 0, 0, 0, 1, 0, -291.489, -220.242, 0, 1);
            transform: matrix3d(0.972, 0, 0, 0, 0, 0.979, 0, 0, 0, 0, 1, 0, -291.489, -220.242, 0, 1);
  }
  39.44% {
    -webkit-transform: matrix3d(0.962, 0, 0, 0, 0, 1.01, 0, 0, 0, 0, 1, 0, -288.62, -227.228, 0, 1);
            transform: matrix3d(0.962, 0, 0, 0, 0, 1.01, 0, 0, 0, 0, 1, 0, -288.62, -227.228, 0, 1);
  }
  41.04% {
    -webkit-transform: matrix3d(0.961, 0, 0, 0, 0, 1.022, 0, 0, 0, 0, 1, 0, -288.247, -229.999, 0, 1);
            transform: matrix3d(0.961, 0, 0, 0, 0, 1.022, 0, 0, 0, 0, 1, 0, -288.247, -229.999, 0, 1);
  }
  44.44% {
    -webkit-transform: matrix3d(0.966, 0, 0, 0, 0, 1.032, 0, 0, 0, 0, 1, 0, -289.763, -232.215, 0, 1);
            transform: matrix3d(0.966, 0, 0, 0, 0, 1.032, 0, 0, 0, 0, 1, 0, -289.763, -232.215, 0, 1);
  }
  52.15% {
    -webkit-transform: matrix3d(0.991, 0, 0, 0, 0, 1.006, 0, 0, 0, 0, 1, 0, -297.363, -226.449, 0, 1);
            transform: matrix3d(0.991, 0, 0, 0, 0, 1.006, 0, 0, 0, 0, 1, 0, -297.363, -226.449, 0, 1);
  }
  59.86% {
    -webkit-transform: matrix3d(1.006, 0, 0, 0, 0, 0.99, 0, 0, 0, 0, 1, 0, -301.813, -222.759, 0, 1);
            transform: matrix3d(1.006, 0, 0, 0, 0, 0.99, 0, 0, 0, 0, 1, 0, -301.813, -222.759, 0, 1);
  }
  61.66% {
    -webkit-transform: matrix3d(1.007, 0, 0, 0, 0, 0.991, 0, 0, 0, 0, 1, 0, -302.102, -222.926, 0, 1);
            transform: matrix3d(1.007, 0, 0, 0, 0, 0.991, 0, 0, 0, 0, 1, 0, -302.102, -222.926, 0, 1);
  }
  63.26% {
    -webkit-transform: matrix3d(1.007, 0, 0, 0, 0, 0.992, 0, 0, 0, 0, 1, 0, -302.171, -223.276, 0, 1);
            transform: matrix3d(1.007, 0, 0, 0, 0, 0.992, 0, 0, 0, 0, 1, 0, -302.171, -223.276, 0, 1);
  }
  75.28% {
    -webkit-transform: matrix3d(1.001, 0, 0, 0, 0, 1.003, 0, 0, 0, 0, 1, 0, -300.341, -225.696, 0, 1);
            transform: matrix3d(1.001, 0, 0, 0, 0, 1.003, 0, 0, 0, 0, 1, 0, -300.341, -225.696, 0, 1);
  }
  83.98% {
    -webkit-transform: matrix3d(0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -299.61, -225.049, 0, 1);
            transform: matrix3d(0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -299.61, -225.049, 0, 1);
  }
  85.49% {
    -webkit-transform: matrix3d(0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -299.599, -224.94, 0, 1);
            transform: matrix3d(0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -299.599, -224.94, 0, 1);
  }
  90.69% {
    -webkit-transform: matrix3d(0.999, 0, 0, 0, 0, 0.999, 0, 0, 0, 0, 1, 0, -299.705, -224.784, 0, 1);
            transform: matrix3d(0.999, 0, 0, 0, 0, 0.999, 0, 0, 0, 0, 1, 0, -299.705, -224.784, 0, 1);
  }
  100% {
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -300, -225, 0, 1);
            transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -300, -225, 0, 1);
  }
}